<template>
    <div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-nav-bar title="发现" left-text="消息">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <van-search
                v-model="keyword"
                @keydown.enter.native="initEnlist"
                shape="round"
                background="#fff"
                placeholder="请输入搜索关键词"
        />
        <div style="float: left">
            <div style="width: 500px;height: 30px; font-size: 14px;margin-top: 12px;margin-left: 10px">
                <span style="margin-left: 10px">9条信息未读</span>
                <span style="margin-left: 20px">清除未读消息</span>
            </div>
        </div>

        <div style="float: left;width: 500px"
             v-for="(item, index) in enlists"
             :key="index"
        >
            <van-image
                    style="float: left;margin-top: 10px;margin-left: 12px"
                    round
                    width="3rem"
                    height="3rem"
                    :src="beautiful[index].imgUrl"
            />
            <div style="float: left;width: 400px;height: 80px; font-size: 14px">
                <div style="float: left;width: 400px;height: 20px;margin-top: 10px;margin-left: 16px">
                    <span>{{item.encruitName}}</span>
                    <span style="margin-left: 10px;float: right;margin-right: 150px;font-size: 10px">更新时间: {{item.updateDate}}</span>
                </div>
                <div style="float: left;width: 400px;height: 20px;margin-left: 16px;margin-top: 10px">
                    <div style="float: left;width: 400px;height: 20px">
                        <span>{{item.encruitRequire}}</span>
                    </div>
                </div>
            </div>
        </div>
        </van-pull-refresh>
    </div>
</template>

<script>

    import beautiful from '../api/beautiful.js'

    export default {
        name: "Find",
        data() {
            return{
                enlists: [],
                keyword: ''
            }
        },
        mounted() {
            this.beautiful = beautiful
            this.initEnlist();
        },
        methods: {
            initEnlist() {
                this.loading = true;
                let url = '/technology/enlist/';
                if (this.keyword != null) {
                    url += "?&encruitName=" + this.keyword;
                }
                this.getRequest(url).then(res => {
                    this.loading = false;
                    if (res) {
                        this.enlists = res.data;
                    }
                });
            },
            onRefresh() {
                window.location.reload()
            },
        }
    }
</script>

<style scoped>

</style>
